@import './variables.scss';

/* .forum-box {} */

/* 版块单项 */

.board-item-box {
    padding: 10px 0 10px 10px;
}

.board-item-box:hover {
    // background-color: #f3f6f9;
    background-color: #e5effa;
    border-radius: 3px;
    cursor: pointer;
}

.board-item {
    display: flex;
    /* height: 4em; */
    margin: 0;
    min-height: 4em;

    > .title-recent {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 10 0 0%;

        > .avatar {
            align-self: center;
            margin-right: 10px;
        }

        > .right {
            align-self: center;
            font-weight: 500;

            > h2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 0px;
                font-weight: 500;
                font-size: 18px;
                // 注：由于不明原因，带图标时比不带高1px，因此强行统一成更高的那个
                min-height: 29.8px;

                > a {
                    color: $gray-700;
                }
            }

            > .topic-info {
                font-size: 14px;
                color: #777;
                line-height: 26px;

                display: flex;
                align-items: center;
                align-content: flex-end;
                justify-content: flex-start;
                justify-items: flex-end;
                margin: 0;

                .board-badge {
                    color: $dark;
                    opacity: 0.6;
                    // background-color: $gray-400;
                    display: inline-flex;
                    align-items: center;
                    margin-right: 10px;

                    .sign {
                        width: 10px;
                        height: 10px;
                        // border-radius: 50%;
                        margin-right: 5px;
                    }

                    .name {
                        margin-right: 10px;
                    }

                    &:hover {
                        color: $dark;
                    }

                    > .name, > .author {
                        max-width: 5em;

                        &.bs4-xl {
                            max-width: 9em;
                        }
                    }
                }

                .author {
                    margin-right: 20px;
                }
            }
        }

        > .icons {
            display: flex;
            flex-direction: column;
            min-width: 16px;
            justify-content: center;
            // 注意，topic-info 栏的实际高度是 25px，22主要是考虑图标的特殊性和右侧对齐
            margin-top: -22px;

            > .awesome {
                color: #e57272;
            }

            > .manage {
                color: #71c1ef;
                cursor: pointer;
            }
        }

        > .append-icons {
            margin-top: -22px;
            display: flex;
            align-items: center;
            color: #777;
            padding: 10px 0px 10px 10px;
            width: 26px;
        }
    }
}

.count-block {
    > div {
        flex: 1 0 auto;
        text-align: center;
        width: 1%; /* 如果不加这个，flex 布局会超框，overflow无效 */
    }

    > * > p {
        margin: 0;
    }

    .count {
        > .num {
            line-height: 32px; /* 与num保持一致 */
            flex-basis: 0%;
            color: #777;
            font-weight: normal;
        }

        > .tip {
            position: absolute;
            font-size: .625em;
            right: 15%;
            top: .2em;
            flex-basis: 0%;
            font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
        }

        > .txt {
            color: #777;
            font-weight: 300;
            font-size: .8em;
            flex-basis: 0%;
            line-height: 26px;
        }
    }
}

.board-item .detail {
    display: flex;
    flex: 9 0 auto;
    flex-basis: 0%;

    /* 板块条目 - 右侧横框计数部分 */
    > .count-block {
        display: flex;
        position: relative;
        align-items: center;
        flex-direction: row;
        flex: 4 0 0%;
        overflow: hidden;
    }

    > .recent {
        display: flex;
        flex: 5 0 0%;
        justify-content: center;
        align-items: center;
        justify-content: space-between;

        text-align: left;
        font-size: .75em;
        flex: 6 0 auto;
        flex-basis: 0%;
        overflow: hidden;
        position: relative;

        > .line {
            border-left: 4px solid #ccc;
            height: 85%;
            padding-left: 0;
            opacity: 0.6;
        }

        > .post {
            flex: 1 0 0;
            max-height: 100%;
            overflow: hidden;
            padding-left: 1.25em;
            text-overflow: ellipsis;
            color: #777;
            max-height: 64px;

            > strong {
                > a {
                    font-weight: normal;
                    overflow-x: hidden;
                    white-space: nowrap;
                }
            }

            .icon-reply {
                font-size: 12px;
                margin-right: 5px;
                color: #777;
            }

            > .post-content {
                cursor: pointer;
                max-height: 3.6em;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-weight: normal;
            }
        }

        > .time {
            padding: 0 1em;
            color: #777;
        }
    }
}

@media screen and (lt-rbp(lg)) {
    .board-item .detail {
        flex: 4 0 0%;
    }
}

@media screen and (lt-rbp(sm)) {
    .header > .ic-navbtns {
        margin-left: 11px;
    }

    .ic-topbtns-box {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .header {
        position: fixed;
        width: 100%;
        z-index: 1;
    }

    .center {
        // 此时顶栏变成absolute所以要隔开
        // 注意原有 + 10px 但由于wiki界面+了的话会有白边，反而是不行
        margin-top: 49px;
    }
}

@media screen and (lt-rbp(md)) {
    .append-icons {
        width: 36px !important;
        padding-right: 10px !important;
    }
}
